var clockCom = Vue.extend({
    template: `
    <div id="clock-com">
        <img src="/static/img/clock.png" width="35px" alt="时钟">
        <span>{{ date | formatDate }}</span>
    </div>
    `,
    data() {
        return {
            date: new Date(),
            timer: null
        }
    },
    filters: {
        formatDate: function (value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
        }
    },
    mounted() {
        this.timer = setInterval(() => {
            this.date = new Date();
        }, 500)
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    }
})